<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button clear small navPop>
        <ion-icon name="ios-arrow-back" class="font_gray"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title class="hide">物料选择</ion-title>
    <div class="pro_class_header" (click)="showQueryMaterialModal()">
      <div class="w12" ng-reflect-nav-push="ProductListPage">
        <span class="fl">搜索商品</span>
        <i class="fr fa fa-search"></i>
      </div>
    </div>
  </ion-navbar>
</ion-header>

<ion-content>
  <ng-container [class.overflow-hide]="isClick">
    <div class="pro_class">
      <ng-container *ngFor="let cate of categorys;index as i">
        <div class="pro_class_item" [class.xuan]="cate.isSelected" (click)="queryPro(cate,i)">
          <span>{{cate.CATEGORY_NAME}}</span>
        </div>
      </ng-container>
    </div>
    <div class="pro_class_main bgcolor_white ">
      <div class="w12 pro_class_case mb15">
        <div class="w12 cart_pro mt10 mb15">
          <div class="w12 cart_pro_ list">
            <ng-container *ngFor="let pro of currentPros,let i = index">
              <div class="w12 cart_pro_item mb10 pl0 pr0">
                <div class="cart_pro_info pl10">
                  <img class="hide" src="">
                  <h3 class="w12 pro_name">{{pro.PRODUCT_NAME}}——{{pro.JQJX_NAME}}</h3>
                  <span class="w04 font_gray font_size_msmall">库存：{{pro.PJSL}}</span>
                  <span class="w04 font_gray font_size_msmall">单位：{{pro.AMOUNT_UOM_ID}}</span>
                  <div class="w12 mt5">
                    <div class="w06 pro_pic">
                      <span class="fl">￥</span>
                      <b class="fl">{{pro.PRICE | money}}</b>
                      <i class="ml10 fa fa-pencil font_black_000" *ngIf="BJ!=1" (click)="setPrice(pro)"></i>
                    </div>
                    <div class="num_p_m mt5">
                      <button class="p" ion-button *ngIf="pro.QUANTITY>0"
                              (click)="quantityChange(pro,0)">-
                      </button>
                      <input type="number" [(ngModel)]="pro.QUANTITY" (keydown)="kdqc($event,pro)" (blur)="eqc(pro)">
                      <button ion-button (click)="quantityChange(pro,1)">+</button>
                    </div>
                  </div>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
    </div>
  </ng-container>

</ion-content>

<ion-footer>
  <div class="cart_footer">
    <div class="fl pl5 pr5" (click)="num>0?isClick = !isClick:''">
      <h3 class="w12">
        <div class="cart_footer_icon"><i class="fa fa-cart-arrow-down"></i><em>{{this.num}}</em></div>
        <span class="fl">合计:</span>
        <div class="footer_pic fl">
          <span class="fl">￥</span>
          <b class="fl">{{ sum | money }}</b>
        </div>
      </h3>
    </div>
    <button class="w04 add_ljgm_btn fr" (click)="onSubmit()">
      <span class="button-inner">确定({{this.num}})</span>
    </button>
  </div>
</ion-footer>

<div class="hbcj_modal" style="top:-50px;" *ngIf="isClick" (click)="isClick = false">
  <div class="cart_main" (click)="$event.stopPropagation()">
    <ng-container *ngIf="BJ=='1'">
      <div class="w12 pl10 pr10 pt5 pb5 bgcolor_gray_444">保修类型</div>
      <ul class="xzfzry">
        <li class="w04" (click)="safe = 0">
          <span [class.xuan]="safe == 0">保内</span>
        </li>
        <li class="w04" (click)="safe = 1">
          <span [class.xuan]="safe == 1">保外</span>
        </li>
        <li class="w04" (click)="safe = 2">
          <span [class.xuan]="safe == 2">延保</span>
        </li>
      </ul>
    </ng-container>
    <div class="w12 pl10 pr10 pt5 pb5 bgcolor_gray_444">
      已选物料
      <span class="fr" (click)="clearAll()">
        <i class="fa fa-trash-o mr5"></i>
        清空购物车
      </span>
    </div>
    <ul class="w12 cart_main_list">
      <ng-container *ngFor="let pros of allPros">
        <ng-container *ngFor="let pro of pros">
          <ng-container *ngIf="pro.QUANTITY>0">
            <li class="bor_bottom">
              <span class="w06">{{pro.PRODUCT_NAME}}</span>
              <span class="w03 tc">￥{{pro.PRICE | money}}</span>
              <div class="w03">
                <div class="num_p_m">
                  <button class="p" ion-button *ngIf="pro.QUANTITY>0" (click)="quantityChange(pro,0)">-</button>
                  <input type="number" type="number" [value]="pro.QUANTITY" disabled>
                  <button ion-button (click)="quantityChange(pro,1)">+</button>
                </div>
              </div>
            </li>
          </ng-container>
        </ng-container>
      </ng-container>
    </ul>
  </div>
</div>
